<template>
  <div class="question">
    <div class="vessel">
      <div class="vessel1">
        <Label @upistrue="upistrue" :data="data" />
        <Attention :data="data" />
      </div>
    </div>
    <div class="container" v-if="istrue">
      <div>
        <Comment :istrue="istrue" @SeeFullAnswer="SeeFullAnswer" />
        <answer :answerlist="answerlist" />
      </div>
      <Author :data="data" />
    </div>
    <el-card class="box-card">
      <Wangeditor
        v-bind="conf"
        v-if="!istrue"
        :articleid="data[0].essay.uid"
        :isanswer="false"
      />
    </el-card>
  </div>
</template>

<script >
import { defineComponent, computed } from "vue";

import Label from "../cpn/label.vue";
import Attention from "../cpn/attention.vue";
import answer from "../cpn/answer";
import Comment from "../cpn/comment.vue";
import Author from "@/components/author";
import Wangeditor from "@/view/wangeditor/wangeditor.vue";

import { useRoute } from "vue-router";
import { useStore } from "vuex";

export default defineComponent({
  components: { Label, Attention, answer, Comment, Author, Wangeditor },
  setup() {
    const store = useStore();
    //控制界面的查看全部按钮和作者信息
    const istrue = computed(() => store.state.comment.showWangeditor);
    const upistrue = () => {
      store.commit("comment/changeWangeditorstate");
    };
    const conf = {
      ToolbarWidth: 1072,
      titleWidth: 800,
      EditorWidth: 800,
      EditorHeight: 400,
      uploadWidth: 800,
      issueWidth: 1072,
      footWidth: 800,
      mode: "simple",
    };
    const route = useRoute();
    const data = store.getters["main/getessayinfo"](parseInt(route.query.id));
    console.log(data, "zdata");

    const answerlist = computed(() => store.state.comment.answerlist);
    console.log(answerlist.value, "answerlist");
    const SeeFullAnswer = () => {
      store.dispatch("comment/getallarticlereply", {
        articleid: parseInt(route.query.id),
      });
      console.log("点击了查看全部回答");
    };
    //传递当前问题ID

    return { istrue, upistrue, conf, data, answerlist, SeeFullAnswer };
  },
});
</script>

<style scoped lang="less">
.question {
  width: 100%;
  background-color: #f6f6f6;
  /deep/.Toolbar {
    margin: auto;
    .w-e-bar {
      width: 1072px;
    }
  }
  .box-card {
    width: 1072px !important;
    margin: auto;
    /deep/.el-card__body {
      padding: 0;
    }
  }
  .vessel {
    margin: auto;
    padding: 16px 0 16px 0;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    margin-bottom: 10px;
    .vessel1 {
      width: 985px;
      margin: auto;
      display: flex;
    }
  }
  .container {
    display: flex;
    width: 985px;
    margin: auto;
  }
}
</style>
